<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
	</head>
	<script src="http://apps.bdimg.com/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<style>
			.all{
				width: 700px;
				height: 535px;
				border: 1px solid red;
				position: relative;
			}
			.left{
				width: 50%;
				position: absolute;
			}
			.right{
					position: relative;
                    padding-bottom: 50.4%;
                    overflow: hidden;                   
                    left: 50%;
                    transition: 1s;
                    width: 50%;
				
			}
			.right img{
					position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    left: -50%;
                    max-height: 100%;
                    display: block;
                    vertical-align: middle;
                    margin: auto;
				}
		</style>
		<div class="all">
			<div class="left">
				
			</div>
			<div class="right">
				<img src="images/pro_03.png" alt=""  />
				
			</div>
		</div>
		<script type="text/javascript">
			
			$(".all").hover(function(){
				$(this).find(".right").animate({
					"left":"0%",
					"width":"100%"
					
				})
				$(this).find(".right img").css({
				"left":"0",	
				})
			},function(){
				$(this).find(".right").animate({
					"left":"50%",
					"width":"50%"
					
				})
				$(this).find(".right img").css({
				"left":"-50%",	
				})
			});
		</script>
	</body>
</html>
